<template>
	<view class="setphone">
		<u-navbar
			back-text="绑定支付宝"
			:background="{
				background: 'transparent'
			}"
		></u-navbar>
		<view class="card">
			<view class="">
				<view class="">支付宝账号：</view>
				<view class="u-flex u-row-left u-col-center">
					<u-icon name="zhifubao-circle-fill" color="#2979ff" :size="50"></u-icon>
					<u-field v-model="alipay_account" :label-width="0" placeholder="请输入支付宝账号"></u-field>
				</view>
			</view>
			<view class="" style="margin-top: 42rpx;">
				<view class="">支付宝实名：</view>
				<view class="u-flex u-row-left u-col-center">
					<u-icon name="account" color="#919191" :size="50"></u-icon>
					<u-field v-model="alipay_name" :label-width="0" placeholder="请输入支付宝实名"></u-field>
				</view>
			</view>
		</view>
		<view class="btnbox">
			<u-button
				shape="circle"
				:ripple="true"
				:hair-line="false"
				ripple-bg-color="rgba(255,255,255,0.3)"
				:custom-style="{
					backgroundColor: '#F2682C',
					color: '#FFFFFF',
					fontWeight: 600,
					boxShadow: '0px 0px 12rpx 0px rgba(242, 104, 44, 100)',
					margin: '0 20rpx'
				}"
				@click="doBangAlipay"
			>
				<text class="bold" style="font-size: 36rpx;">提 交</text>
			</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'setphone',
	data() {
		return {
			alipay_account: '',
			alipay_name: ''
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		doBangAlipay() {
			if (this.alipay_name === '' || this.alipay_account === '') {
				this.$refs.uToast.show({
					title: '请检查表单!',
					type: 'error'
				});
				return;
			}
			this.$u.api
				.doBangAlipay({
					alipay_name: this.alipay_name,
					alipay_account: this.alipay_account
				})
				.then(res => {
					console.log(res);
					let info = uni.getStorageSync('jxuser');
					info.alipay_account = this.alipay_account;
					uni.setStorageSync('jxuser', info);
					this.$refs.uToast.show({
						title: '绑定成功!',
						type: 'success'
					});
					uni.navigateTo({
						url: '/pages/center/withdraw/withdraw'
					});
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.setphone {
	.card {
		background-color: #ffffff;
		padding: 28rpx 40rpx 36rpx 56rpx;
		margin: 10rpx 20rpx 44rpx;
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.09);
		border-radius: 12rpx;
		overflow: hidden;
	}
}
</style>
